<template>
    <div class="VonSmallTitle" :style="{minHeight:subTitle?'20px':''}">
        <p class="title">
            <span>{{title}}</span>
            <span v-if="subTitle" :style="{color:customColor?customColor:'#0DFF1E'}" class="subTitle">
                {{subTitle}}
            </span>
        </p>
        <p class="content" v-if="number == 1">{{content}}</p>
        <div v-if="number == 4">
            <el-row>
                <el-col :span="10" :offset="2">
                    <p class="title" style="color: #20CCFE ">合格数</p>
                    <p class="content1" style="color: #20CCFE ">{{passCount}}</p>
                </el-col>
                <el-col :span="10" :offset="2">
                    <p class="title" style="color: #E33F29">不合格数</p>
                    <p class="content1" style="color: #E33F29">{{unqualifiedCount}}</p>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="10" :offset="2">
                    <p class="title" style="color:rgba(227, 194, 41, 1)">总数</p>
                    <p class="content1" style="color:rgba(227, 194, 41, 1)">{{passCount+unqualifiedCount}}</p>
                </el-col>
                <el-col :span="10" :offset="2">
                    <p class="title" style="color: rgba(41, 227, 142, 1)">良品率</p>
                    <p class="content1" style="color: rgba(41, 227, 142, 1)">{{countFix +'%'}}</p>
                </el-col>
            </el-row>
        </div>
        <div v-if="number == 6">
            <el-row>
                <el-col :span="10" :offset="2">
                    <p class="title6">测试电压(V)</p>
                    <p class="content6">269</p>
                </el-col>
                <el-col :span="10" :offset="2">
                    <p class="title6">爬升时间(s)</p>
                    <p class="content6">269</p>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="10" :offset="2">
                    <p class="title6">测试时间(s)</p>
                    <p class="content6">1000</p>
                </el-col>
                <el-col :span="10" :offset="2">
                    <p class="title6">漏电流(mA)</p>
                    <p class="content6">100%</p>
                </el-col>
            </el-row>
        </div>
        <p class="content3" v-if="number == 3">{{content}}</p>
        <slot name="switch"></slot>
        <slot name="checkBox"></slot>
    </div>
</template>

<script>
export default {
  name: "VonSmallTitle",
  props: {
    customColor: {
      type: String,
      default: ""
    },
    number: {
      type: [Number, String],
      default: 1
    },
    title: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
    passCount: {
      type: Number,
      default: 0
    },
    unqualifiedCount: {
      type: Number,
      default: 0
    },
    countFix: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style scoped lang="scss">
.VonSmallTitle {
  margin-top: 6px;
  width: 100%;
  min-height: 68px;
  padding: 0 10px;
  .title {
    display: flex;
    margin-bottom: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #b9c5dd;
    .subTitle {
      margin-left: auto;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
    }
  }
  .title6 {
    margin-bottom: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
  .content6 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #1afcff;
  }
  .content3 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    word-break: break-word;
  }
  .content {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 18px;
  }
  .content1 {
    width: 100%;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 18px;
  }
  .el-col {
    text-align: center;
  }
}
</style>
